<template>
    <div>
        <transition name="fade">
            <div class="create-popup" style="z-index: 999"
                 v-if="lottery_list.listShow">
                <h1 class="create-popup-tit">
                    <template>{{$t('m.efomo.lottery_list.tit')}}</template>
                </h1>
                <div class="create-content">
                    <div class="create-list">
                        <ul>
                            <li>{{$t('m.efomo.lottery_list.phone')}}</li>
                            <li>{{$t('m.efomo.lottery_list.price')}}</li>
                        </ul>
                        <ul v-if="lottery_list.id == 1" v-for="v in WeekWinnerList" class="create-num">
                            <li>{{v.name}}</li>
                            <li>{{v.amount || 0}}</li>
                        </ul>
                        <ul v-else v-for="v in LastWinnerList" class="create-num">
                            <li>{{v.name}}</li>
                            <li>{{v.amount || 0}}</li>
                        </ul>
                    </div>
                </div>
                <button class="create-next" @click="aShowList({listShow: false})">{{ $t('m.sicbo.explain.explain[15]')
                    }}
                </button>
            </div>
        </transition>
        <transition name="bg">
            <div class="mui-backdrop" v-if="lottery_list.listShow"></div>
        </transition>
    </div>
</template>
<script>

    export default {
        name: 'Efomo_list'
    }
</script>
<style scoped>


    .create-popup-tit {
        margin-bottom: .6rem;
    }

    .create-list ul {
        display: flex;
        justify-content: space-between;
    }

    .create-list ul li {
        width: calc(100% / 2);
        text-align: center;

    }

    .create-list ul:first-child li {
        font-size: .32rem;
    }

    .create-num {
        margin-top: .2rem;
    }

    .create-list .create-num li {
        line-height: .6rem;
        font-weight: normal;
        font-size: .28rem;
    }

    .create-content {
        height: calc(100% - 2.4rem);
    }

    .create-line {
        margin: .1rem;
        display: block;
    }

    .fontw {
        font-weight: normal;
    }

    .create-next {
        background-color: #E5BC8E;
        color: #000;
        padding: 0;
        height: 40px;
        font-size: 14px;
    }

    .fade-enter-active, .fade-leave-active {
        transition: all 0.5s;
    }

    .fade-enter, .fade-leave-to {
        transform: translate(-50%, 10rem);
    }

    .bg-enter-active, .bg-leave-active {
        transition: all 0.5s;
    }

    .bg-enter, .bg-leave-to {
        opacity: 0;
    }
</style>
